import React from 'react';
import { findDOMNode } from 'react-dom';
import TweenOne from 'rc-tween-one';
import { Menu, Icon, Avatar } from 'antd';
import Link from 'umi/link';
import router from 'umi/router';

import { connect } from 'dva/index';

const { Item, SubMenu } = Menu;
const R = require('ramda');

@connect(({ user }) => ({ user }))
class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      phoneOpen: false,
      menuHeight: 0,
    };
  }

  phoneClick = () => {
    const menu = findDOMNode(this.menu);
    const phoneOpen = !this.state.phoneOpen;
    this.setState({
      phoneOpen,
      menuHeight: phoneOpen ? menu.scrollHeight : 0,
    });
  };

  handleLogout = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'user/logout',
      payload: {
        onSuccess: () => {
          dispatch({
            type: 'global/refreshState',
            payload: {
              userInfo: {},
            },
          });
          this.setState({});
        },
      },
    });
  };

  render() {
    const { dataSource, isMobile, ...props } = this.props;
    const { menuHeight, phoneOpen } = this.state;
    const navData = dataSource.Menu.children;
    const navChildren = Object.keys(navData).map((key, i) => {
      const { a, navProps } = navData[key];
      return (
        <Item {...navProps} key={i.toString()}>
          <Link {...a} to={a.href}>
            {a.children}
          </Link>
        </Item>
      );
    });

    // user 涉及到数据，请自行替换。
    const userTitle = (
      <div {...dataSource.user} style={{ color: 'yellow' }}>
        {/* <span className="img" {...dataSource.user.img}> */}
        {/* <Avatar size={32} icon="user" /> */}
        {/* </span> */}
        <Icon type="user" />
        <span>{sessionStorage.getItem('userName')}</span>
      </div>
    );

    if (
      R.isNil(sessionStorage.getItem('userName')) ||
      R.isEmpty(sessionStorage.getItem('userName'))
    ) {
      navChildren.push(
        <Item {...dataSource.help} key="help">
          <Icon type="question-circle-o" />
          <span>{dataSource.help.children}</span>
        </Item>,
        <a
          key="l"
          style={{ color: 'yellow' }}
          onClick={() => {
            router.push({pathname:'/user/login',query:{redirect:window.location.href}});
          }}
        >
          登录
        </a>,
      );
    } else {
      navChildren.push({
        ...(dataSource.regist.show ? (
          <Item
            {...dataSource.regist}
            key="regist"
            onClick={() => {
              router.push('/user/register');
            }}
          >
            <Icon type="user-add" />
            <span>{dataSource.regist.children}</span>
          </Item>
        ) : (
          <SubMenu className="user" title={userTitle} key="user">
            <Item
              key="a"
              onClick={() => {
                router.push('/manage/person/workplace');
              }}
            >
              用户中心
            </Item>
            <Item
              key="b"
              onClick={() => {
                router.push('/manage/person/password');
              }}
            >
              修改密码
            </Item>
            <Item key="c" onClick={this.handleLogout.bind(this)}>
              注销
            </Item>
          </SubMenu>
        )),
      });
    }

    const menuProps = {
      mode: isMobile ? 'inline' : 'horizontal',
      defaultSelectedKeys: ['0'],
      theme: isMobile ? 'dark' : 'default',
    };
    if (isMobile) {
      menuProps.openKeys = ['user'];
    }
    return (
      <TweenOne
        component="header"
        animation={{ opacity: 0, type: 'from' }}
        {...dataSource.wrapper}
        {...R.omit(['dispatch'])(props)}
      >
        <div
          {...dataSource.page}
          className={`${dataSource.page.className}${phoneOpen ? ' open' : ''}`}
        >
          <TweenOne
            animation={{
              x: -30,
              delay: 100,
              type: 'from',
              ease: 'easeOutQuad',
            }}
            {...dataSource.logo}
          >
            <img width="100%" src={dataSource.logo.children} alt="img" />
          </TweenOne>
          {isMobile && (
            <div
              {...dataSource.mobileMenu}
              onClick={() => {
                this.phoneClick();
              }}
            >
              <em />
              <em />
              <em />
            </div>
          )}
          <TweenOne
            {...dataSource.Menu}
            animation={{ x: 30, type: 'from', ease: 'easeOutQuad' }}
            ref={c => {
              this.menu = c;
            }}
            style={isMobile ? { height: menuHeight } : null}
          >
            <Menu {...menuProps}>{navChildren}</Menu>
          </TweenOne>
        </div>
      </TweenOne>
    );
  }
}

export default Header;
